<template>
  <div class="_postPage">
    <div style="display:none" v-for="item in postArr" :key="item.id">
      <img class="bgImg" :ref="'bgImg'+item.id" :src="item.img" />
      <div :ref="'code'+item.id" class="codeContainer"></div>
      <canvas
        :ref="'canvas'+item.id"
        class="canvas"
        :width="item.postWidth"
        :height="item.postHeight"
      ></canvas>
    </div>
    <div class="imgCon">
      <div class="imgItem" v-for="(item,index) in postImgArr" :key="'bg'+index">
        <img @click="preview(index)" :src="item" v-show="item" />
      </div>
    </div>
  </div>
</template>

<script>
import bgImg from "@/assets/切图/直播图-朋友圈海报56.jpg";
import bgImgA from "@/assets/切图/电商01-A.jpg";
import bgImgB from "@/assets/切图/电商01-B.jpg";
import bgImgC from "@/assets/切图/电商01-C.jpg";
import bgImgD from "@/assets/切图/电商01-D.jpg";
import bgImgE from "@/assets/切图/电商01-E.jpg";
import bgImgF from "@/assets/切图/四川直播-朋友圈9宫格-1.jpg";
import bgImgG from "@/assets/切图/四川直播-朋友圈9宫格-2.1.jpg";
import bgImgH from "@/assets/切图/四川直播-朋友圈9宫格-3.2.jpg";
import bgImgI from "@/assets/切图/四川直播-朋友圈9宫格-4.1.jpg";
import bgImgJ from "@/assets/切图/海报J.png";
import bgImgK from "@/assets/切图/四川直播-朋友圈9宫格-6.2.jpg";
import bgImgL from "@/assets/切图/四川直播-朋友圈9宫格-7.jpg";
import bgImgM from "@/assets/切图/二维码-e11-1.jpg";
import { createShareUrl, shareRouter } from "@/config/shareConfig";
import { mapActions } from "vuex";
import { Dialog, ImagePreview, Toast } from "vant";
import qs from "qs";
//海报宽高
const postWidth = 1080;
const postHeight = 1920;
//二维码位置
const qrCodeWidth = 331;
const qrCodeLeft = 150;
const qrCodeTop = 1390;
//二维码外边框
const codeBorderWidth = 339;
const codeBorderLeft = 147;
const codeBorderTop = 1385;
//二维码底部文字
const codeTextWidth = 534;
const codeTextLeft = 316;
const codeTextTop = 1797;
export default {
  components: {
    [ImagePreview.name]: ImagePreview
  },
  data() {
    return {
      postImgArr: [],
      codeReady: false,
      bgReady: false,
      staffReady: false,
      postImg: null,
      postWidth,
      postHeight,
      postArr: Object.freeze([
        {
          img: bgImg,
          postWidth: 1080,
          postHeight: 1920,
          codeWidth: 331,
          codeLeft: 150,
          codeTop: 1390,
          borderWidth: 339,
          borderleft: 147,
          borderTop: 1385,
          textWidth: 534,
          textTop: 1797,
          textLeft: 316,
          id: 0,
          fontStyle: "white",
          font: "40px normal"
        },
        {
          img: bgImgA,
          postWidth: 900,
          postHeight: 1600,
          codeWidth: 200,
          codeLeft: 54,
          codeTop: 904,
          borderWidth: 208,
          borderleft: 50,
          borderTop: 900,
          textWidth: 200,
          textTop: 1154,
          textLeft: 154,
          id: 1,
          fontStyle: "black",
          font: "30px normal"
        },
        {
          img: bgImgB,
          postWidth: 900,
          postHeight: 1600,
          codeWidth: 200,
          codeLeft: 54,
          codeTop: 904,
          borderWidth: 208,
          borderleft: 50,
          borderTop: 900,
          textWidth: 200,
          textTop: 1154,
          textLeft: 154,
          id: 2,
          fontStyle: "black",
          font: "30px normal"
        },
        {
          img: bgImgC,
          postWidth: 900,
          postHeight: 1600,
          codeWidth: 200,
          codeLeft: 604,
          codeTop: 904,
          borderWidth: 208,
          borderleft: 600,
          borderTop: 900,
          textWidth: 200,
          textTop: 1154,
          textLeft: 704,
          id: 3,
          fontStyle: "black",
          font: "30px normal"
        },
        {
          img: bgImgD,
          postWidth: 900,
          postHeight: 1600,
          codeWidth: 180,
          codeLeft: 704,
          codeTop: 1344,
          borderWidth: 188,
          borderleft: 700,
          borderTop: 1340,
          textWidth: 200,
          textTop: 1570,
          textLeft: 794,
          id: 4,
          fontStyle: "black",
          font: "30px normal"
        },
        {
          img: bgImgE,
          postWidth: 900,
          postHeight: 1600,
          codeWidth: 200,
          codeLeft: 54,
          codeTop: 904,
          borderWidth: 208,
          borderleft: 50,
          borderTop: 900,
          textWidth: 200,
          textTop: 1154,
          textLeft: 154,
          id: 5,
          fontStyle: "black",
          font: "30px normal"
        },
        {
          img: bgImgF,
          postWidth: 900,
          postHeight: 1600,
          codeWidth: 160,
          codeLeft: 29,
          codeTop: 1374,
          borderWidth: 168,
          borderleft: 25,
          borderTop: 1370,
          textWidth: 200,
          textTop: 1570,
          textLeft: 114,
          id: 6,
          fontStyle: "black",
          font: "30px normal"
        },
        {
          img: bgImgG,
          postWidth: 900,
          postHeight: 1600,
          codeWidth: 160,
          codeLeft: 29,
          codeTop: 1374,
          borderWidth: 168,
          borderleft: 25,
          borderTop: 1370,
          textWidth: 200,
          textTop: 1570,
          textLeft: 114,
          id: 7,
          fontStyle: "black",
          font: "30px normal"
        },
        {
          img: bgImgH,
          postWidth: 900,
          postHeight: 1600,
          codeWidth: 160,
          codeLeft: 29,
          codeTop: 1374,
          borderWidth: 168,
          borderleft: 25,
          borderTop: 1370,
          textWidth: 200,
          textTop: 1570,
          textLeft: 114,
          id: 8,
          fontStyle: "black",
          font: "30px normal"
        },
        {
          img: bgImgI,
          postWidth: 900,
          postHeight: 1600,
          codeWidth: 160,
          codeLeft: 29,
          codeTop: 1374,
          borderWidth: 168,
          borderleft: 25,
          borderTop: 1370,
          textWidth: 200,
          textTop: 1570,
          textLeft: 114,
          id: 9,
          fontStyle: "black",
          font: "30px normal"
        },
        {
          img: bgImgJ,
          postWidth: 720,
          postHeight: 1280,
          codeWidth: 140,
          codeLeft: 24,
          codeTop: 1104,
          borderWidth: 148,
          borderleft: 20,
          borderTop: 1100,
          textWidth: 160,
          textTop: 1270,
          textLeft: 90,
          id: 10,
          fontStyle: "black",
          font: "26px normal"
        },
        {
          img: bgImgK,
          postWidth: 900,
          postHeight: 1600,
          codeWidth: 160,
          codeLeft: 29,
          codeTop: 1374,
          borderWidth: 168,
          borderleft: 25,
          borderTop: 1370,
          textWidth: 200,
          textTop: 1570,
          textLeft: 114,
          id: 11,
          fontStyle: "black",
          font: "30px normal"
        },
        {
          img: bgImgL,
          postWidth: 900,
          postHeight: 1600,
          codeWidth: 160,
          codeLeft: 29,
          codeTop: 1374,
          borderWidth: 168,
          borderleft: 25,
          borderTop: 1370,
          textWidth: 200,
          textTop: 1570,
          textLeft: 114,
          id: 12,
          fontStyle: "black",
          font: "30px normal"
        },
        {
          img: bgImgM,
          postWidth: 2000,
          postHeight: 3555,
          codeWidth: 450,
          codeLeft: 1305,
          codeTop: 1425,
          borderWidth: 460,
          borderleft: 1300,
          borderTop: 1420,
          textWidth: 450,
          textTop: 1950,
          textLeft: 1520,
          id: 13,
          fontStyle: "white",
          font: "60px normal"
        },
      ])
    };
  },
  computed: {
    shareParams() {
      return this.$store.state.shareParams;
    },
    supInfoMy() {
      return this.$store.state.activity.supInfoMy;
    },
    activityMsg() {
      return this.$store.state.activityMsg;
    },
    device() {
      return this.$store.state.device;
    },
    isReady() {
      return this.codeReady && this.bgReady && this.staffReady;
    },
    staffInfo() {
      return this.$store.state.staffInfo;
    },
    staffAndShareReady() {
      return this.staffReady && this.$store.state.shareParams;
    }
  },
  watch: {
    staffInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          this.staffReady = true;
        }
      }
    },
    isReady: {
      immediate: true,
      handler(val) {
        if (val) {
        }
      }
    },
    staffAndShareReady: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.createLinkData(this.$store.state.shareParams);
          });
        }
      }
    },
    postImgArr: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val.length == this.postArr.length) {
          this.$nextTick(() => {
            this.postArr = [];
            Toast.clear();
          });
        }
      }
    }
  },
  mounted() {
    Toast.loading();
  },
  methods: {
    ...mapActions({
      getActivityByPostId: "activity/getActivityByPostId",
      getActivityByShareId: "activity/getActivityByShareId"
    }),
    createLinkData(shareParams) {
      this.getActivityByShareId({
        shareId: shareParams.shareId
      })
        .then(res => {
          if (res.code == "000000") {
            return this.getActivityByPostId({
              pbId: res.data.pbId
            });
          } else {
            return null;
          }
        })
        .then(res => {
          if (res && res.code == "000000") {
            if (res.data.pbSourceOpenid == this.$store.state.userId) {
              let obj = {
                aid: this.$store.state.aid
              };
              let link = "";
              if (shareParams.shareId) obj.shareId = shareParams.shareId;
              link = createShareUrl(
                obj,
                this.$route.path,
                shareRouter.actRouter
              );
              this.createQrCode(link);
            } else {
              Dialog.alert({ message: "生成专属海报失败" });
            }
          } else {
            Dialog.alert({ message: "网络错误" });
          }
        })
        .catch(err => {
          Dialog.alert({ message: "网络错误" });
        });
    },
    createQrCode(link) {
      this.$nextTick(() => {
        this.postArr.forEach((e, i) => {
          let qrcode = new QRCode(this.$refs[`code${e.id}`][0], {
            text: link,
            width: e.codeWidth,
            height: e.codeWidth
          });
        });
        this.$nextTick(() => {
          this.postArr.forEach((e, i) => {
            let codeDom = this.$refs[`code${e.id}`][0].getElementsByTagName(
              "img"
            )[0];
            let imgDom = this.$refs[`bgImg${e.id}`][0];
            let codeDomLoaded = function() {
              return new Promise((resolve, reject) => {
                // if (codeDom.complete) {
                //   resolve();
                // }
                codeDom.onload = () => {
                  console.log("codeload", e.id);
                  resolve();
                };
                codeDom.onError = () => {
                  console.log("codeerr", e.id);
                  reject();
                };
              });
            };
            let imgDomLoaded = function() {
              return new Promise((resolve, reject) => {
                if (imgDom.complete) {
                  console.log("imgcomplete", e.id);
                  imgDom.width = e.postWidth;
                  imgDom.height = e.postHeight;
                  resolve();
                }
                imgDom.onload = () => {
                  console.log("imgload", e.id);
                  imgDom.width = e.postWidth;
                  imgDom.height = e.postHeight;
                  resolve();
                };
                imgDom.onError = () => {
                  console.log("imgerr", e.id);
                  reject();
                };
              });
            };

            Promise.all([codeDomLoaded(), imgDomLoaded()])
              .then(() => {
                console.log("suc", e.id);
                this.createCanvas(e);
              })
              .catch(err => {
                console.log(err);
              });
          });
          
        });
      });
    },
    createCanvas(item) {
      let canvas = this.$refs[`canvas${item.id}`][0];
      let ctx = canvas.getContext("2d");
      let bgImgDom = this.$refs[`bgImg${item.id}`][0];
      let codeDom = this.$refs[`code${item.id}`][0].getElementsByTagName(
        "img"
      )[0];
      ctx.drawImage(
        bgImgDom,
        0,
        0,
        item.postWidth,
        item.postHeight,
        0,
        0,
        item.postWidth,
        item.postHeight
      );
      ctx.fillStyle = "white";
      ctx.fillRect(
        item.borderleft,
        item.borderTop,
        item.borderWidth,
        item.borderWidth
      );
      ctx.drawImage(
        codeDom,
        0,
        0,
        item.codeWidth,
        item.codeWidth,
        item.codeLeft,
        item.codeTop,
        item.codeWidth,
        item.codeWidth
      );
      ctx.fillStyle = item.fontStyle;
      ctx.textAlign = "center";
      ctx.font = item.font;
      let name = this.staffInfo.Name || "";
      ctx.fillText(
        `亚太天能${name} 邀请您参加活动`,
        item.textLeft,
        item.textTop,
        item.textWidth,
        item.textWidth
      );
      this.postImgArr.push(canvas.toDataURL("image/png"));
    },
    preview(index) {
      ImagePreview({
        images: this.postImgArr,
        startPosition: index
      });
    },
    videoPreview(e, item) {
      e.preventDefault();
      window.open(item.url);
    }
  }
};
</script>

<style lang="scss" scoped>
._postPage {
  position: relative;
  .bgImg {
    width: 100vw;
  }
  .codeContainer {
    width: 232px;
    height: 230px;
    position: absolute;
    left: 270px;
    top: 894px;
  }
  .canvas {
    width: 100vw;
    display: none;
  }
  .imgCon {
    display: flex;
    flex-wrap: wrap;
    padding: 24px;
    box-sizing: border-box;
    .imgItem {
      width: 33%;
      img {
        width: 100%;
      }
    }
  }
  .videoCon {
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;

    .videoName {
      color: white;
      padding-bottom: 12px;
    }
    .videoContainer {
      width: 100%;
      margin-bottom: 50px;
      box-sizing: border-box;
      // height: 500px;
    }
  }
}
</style>